<script setup lang="ts">
import { ref } from 'vue'

const progress = ref(null)
const btnLoading = () => {
  progress.value.classList.remove('active')
  progress.value.offsetHeight
  progress.value.classList.add('active')
}
</script>

<template>
  加载进度： <div class="progress" ref="progress"></div>

  <button id="button" @click="btnLoading">开始加载</button>
</template>

<style scoped lang="scss">
@property --percent {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
.progress {
  width: 300px;
  line-height: 20px;
  background-color: #f0f2f3;
}
.progress::before {
  --percent: 0;
  counter-reset: progress var(--percent);
  content: counter(progress) '%\2002';
  display: block;
  width: calc(300px * var(--percent) / 100);
  font-size: 12px;
  color: #fff;
  background-color: #2486ff;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  transition: none;
}
.progress.active::before {
  --percent: 99;
  transition: 100s --percent cubic-bezier(.08,.81,.29,.99);
}
#button {
  margin-block: 5px;
  padding: 5px;
  border-radius: 4px;
  color: white;
  background: #3287f4;
}
</style>